
window.onload = function () {
  var btnBox = document.getElementsByClassName('btnBox')[0];
  var bBtn = btnBox.getElementsByClassName('bigger')[0];
  var getTemple = btnBox.getElementsByClassName('getTemple')[0];
  var newBtn = btnBox.getElementsByClassName('newBtn')[0];

  getTemple.style.display = 'none';
  newBtn.style.display = 'none';

  bBtn.onclick = function () {
    if (getTemple.style.display === 'block') {
      getTemple.style.display = 'none';
      newBtn.style.display = 'none';
    } else {
      getTemple.style.display = 'block';
      newBtn.style.display = 'block';
    }
  }


  // ------
  var writeBtns = document.getElementsByClassName('write');
  var handleBtns = document.getElementsByClassName('handle');
  var statusMain = document.getElementsByClassName('s_main');
  var statustextarea = document.getElementsByTagName('textarea');
  // -----
  var showBtns = document.getElementsByClassName('db_title');
  var showMain = document.getElementsByClassName('db_main');
  var btnChange = document.getElementsByClassName('icon');
  // -----
  // showDetails(uli, null, null, realMain, null)
  showDetails(showBtns, showMain, btnChange, null, null);
  showDetails(writeBtns, statusMain, null, statustextarea, handleBtns);
  showDetails(handleBtns, statustextarea, null, statusMain, writeBtns);
}
function showDetails (btn, main, bChange, textarea, handle) {
  for (var i = 0; i < btn.length; i++) {
    btn[i].index = i;
    btn[i].onmouseover = function () {
      if (main === null) {//btn textarea
        btn[this.index].onclick = function () {
          aClick(btn, btn[this.index], textarea[this.index], textarea);
        }
      } else if (bChange !== null) {
        btn[this.index].onclick = function () {
          bClick(main[this.index], bChange[this.index]);
        }
      } else if (textarea !== null) {
        if (btn[this.index].className !== 'write') {
          // console.log(btn[this.index].getElementsByTagName('li'))
          var cbtn = btn[this.index].getElementsByTagName('li');
          var a = this.index
          cbtn[1].onclick = function () {
            btn[a].style.display = 'none';
            main[a].style.display = 'none';
            textarea[a].style.display = 'block';
            handle[a].style.display = 'block';
          }
          cbtn[0].onclick = function () {
            btn[a].style.display = 'none';
            main[a].style.display = 'none';
            textarea[a].style.display = 'block';
            handle[a].style.display = 'block';
            // console.log(textarea[a].innerText)
            // console.log(main[a].value)
            textarea[a].innerText = main[a].value
          }
        } else {
          wClick(btn[this.index], main[this.index], textarea[this.index], handle[this.index]);
        }
      }
    }
  }
}
function aClick (obtn, btn, main, omain) {
  if (btn.className === 'left') {
    obtn[0].className = 'active left'
    obtn[1].className = 'right'
    omain[1].className = 'display main'
    omain[0].className = 'main'
  } else {
    obtn[0].className = 'left'
    obtn[1].className = 'active right'
    omain[1].className = 'main'
    omain[0].className = 'display main'
  }
}
function bClick (main, bChange) {
  if (main.style.display === 'block') {
    main.style.display = 'none'
    bChange.className = 'icon icon-6 f-blue'
  } else if (main.style.display === null) {
    main.style.display = 'none'
    bChange.className = 'icon icon-6 f-blue'
  } else {
    main.style.display = 'block'
    bChange.className = 'icon icon-8 f-blue'
  }
}
function wClick (wBtn ,main, textarea, handle) {
  main.style.display = 'none'
  wBtn.style.display = 'none'
  textarea.style.display = 'block'
  handle.style.display = 'block'
  textarea.value = main.innerText.replace(/[\r\n]/g,"").replace(/[ ]/g,"")//去掉回车空格后赋值
}